* {
    padding: 0;
    margin: 0;
    list-style: none;
}

body {
    background: url(./素材图/index_bg.png);
}

.bigBox {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-between;


    // 左边
    .left {
        box-sizing: border-box;
        width: 30%;
        height: 100%;
        padding: 10px;

        // 左边顶部第一个盒子
        .left_top {
            box-sizing: border-box;
            // padding: 20px;
            width: 100%;
            height: 160px;
            background: url(./素材图/border_bg01.png);
            background-size: 100%;
            position: relative;

            .left_item_p {
                position: absolute;
                top: 30px;
                left: 150px;
                width: 40%;
                height: 20px;
                color: #0f8ce2;
                background-size: 100%;
                text-align: center;
                background: url(./素材图/title_bg01.png);
            }

            h1 {
                color: #fefdfb;
                position: absolute;
                bottom: 40px;
                left: 140px;
                font-size: 42px;
                font-weight: 500;
            }
        }

        // 
        .left_item2 {
            box-sizing: border-box;
            width: 100%;
            height: 30px;
            background: url(./素材图/box_title.png);
            background-size: 100%;
            margin-top: 10px;
            color: #e9e6e3;
            line-height: 30px;
            padding-left: 40px;
        }

        // 左边第一个图饼
        .left_item3 {
            width: 100%;
            height: 30%;
            // background-color: antiquewhite;
        }

        // 表格
        .left_item4 {
            width: 100%;
            margin-top: 10px;

            // background-size: 100%;

            .ul_top {
                display: flex;
                justify-content: space-around;
                width: 100%;
                height: 30px;
                line-height: 30px;
                color: #e9e6e3;
                background-color: #124f7b;
                border: 1px solid #0f6ba9;

            }

            .ul_item {
                display: flex;
                justify-content: space-around;
                width: 100%;
                height: 42px;
                line-height: 42px;
                color: #e9e6e3;
                text-align: center;

                // background-color: #465c70de;
                li {
                    flex: 1;
                    border: 1px solid #0f6ba9;
                }
            }
        }
    }

    // 中间
    .conten {
        box-sizing: border-box;
        flex: 1;
        height: 100%;
        padding: 10px;
        position: relative;

        // 顶部名称
        .conten_item1 {
            position: relative;
            width: 100%;
            height: 50px;
            background: url(./素材图/title_border.png);
            background-size: 100%;
            background-repeat: no-repeat;

            img {
                width: 30px;
                position: absolute;
                left: 130px;
            }

            span {
                position: absolute;
                font-size: 25px;
                color: #cdddf7;
                font-weight: 800;
                left: 170px;
            }
        }

        // 天气栏
        .conten_item2 {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            // align-items: center;

            // 左边
            .conten_item2_left {
                border: 1px solid #0e76bb;
                padding: 10px;
                color: #fff;
                display: flex;

                .conten_item2_left_a {
                    p {
                        font-size: 20px;
                    }

                    span {
                        color: rgba(255, 255, 255, 0.801);
                        font-size: 10px;
                    }
                }

                .conten_item2_left_b {
                    width: 2px;
                    height: 80%;
                    background-color: rgba(255, 255, 255, 0.685);
                    margin: 5px 10px 0 10px;
                }

                .conten_item2_left_c {
                    display: flex;

                    img {
                        width: 50px;
                        height: 40px;
                    }

                    section {
                        font-size: 12px;
                        color: rgba(255, 255, 255, 0.801);
                    }
                }


            }

            // 中间图片
            .conten_item2_img {
                background: url(./素材图/line_bg.png);
                height: 80px;
                width: 8px;
                background-size: 100%;
                margin: 0 10px;
            }

            // 右边
            .conten_item2_right {
                flex: 1;
                padding-top: 10px;
                font-size: 15px;
                // background-color: yellowgreen;
                .conten_item2_right_a {
                    color: #f5f902;
                }

                .conten_item2_right_b {
                    color: yellowgreen;
                }

                .conten_item2_right_c {
                    color: #66cdaf;
                }
            }
        }

        // 犯罪人口
        .conten_item3{
            line-height: 150px;
            text-align: center;
            color: rgba(255, 255, 255, 0.788);
        }

        // 地图
        .conten_item4{
            // position: absolute;
            // bottom: 30px;
            width: 99%;
            height: 50%;
            // background-color: antiquewhite;
            // background: url(./素材图/ditu.png);
            // background-size: 100%;

        }


    }

    // 右边
    .right {
        box-sizing: border-box;
        width: 30%;
        height: 100%;
        padding: 10px;

        // 右边顶部文字
        .right_item1 {
            box-sizing: border-box;
            width: 100%;
            height: 30px;
            background: url(./素材图/box_title.png);
            background-size: 100%;
            margin-top: 10px;
            color: #e9e6e3;
            line-height: 30px;
            padding-left: 40px;
        }

        // 右边顶部圆图饼
        .right_item2 {
            width: 100%;
            height: 30%;
        }

        // 右边中间柱形饼
        .right_item3 {
            width: 100%;
            height: 200px;
            // background-color: yellow;
        }

        // 右边底部折线图
        .right_item4 {
            width: 100%;
            height: 220px;
            margin-top: 10px;
            // background-color: rgb(240, 240, 169);
        }

    }

    // 左边的边框线
    .left_img {
        width: 10px;
        height: 100%;
        background: url(./素材图/line_img.png);
    }

    // 右边的边框线
    .right_img {
        width: 10px;
        height: 100%;
        background: url(./素材图/line_img.png);
    }

}